<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;top:0px;left:0px">
            <div style="width:100%">
            </div>
        </el-main>
    </div>
</template>

<script setup>
import * as 天地图 from '../天地图'
import {onMounted,ref,computed} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import SceneView from '@arcgis/core/views/SceneView'
var map,view,要素图层
onMounted(()=>{
    要素图层=new FeatureLayer({
        url:"https://ws8575.club/web/rest/services/Hosted/要素图层发布测试_前端渲染测试_3857/FeatureServer/0",
        renderer:{
            type:"simple",
            symbol:{
                type:"point-3d",
                verticalOffset: {
                    screenLength: 80,
                    maxWorldLength: 200,
                    minWorldLength: 35
                },
                callout: {
                    type:"line",
                    color: [128,128,128],
                    size: 1
                },
                symbolLayers: [{ 
                    type: "icon",
                    resource: { primitive: "circle"},
                    material: {  color: [219, 53, 53, 0.5] },
                    size: 16,
                }, {
                    type: "icon",
                    resource: {  primitive: "circle"  },
                    material: {   color: [219, 53, 53, 1] },
                    size:8,
                    outline: {
                        color:[255,255,255],//允许不设置pattern
                        size: 0.5
                    }
                }, {
                    type: "icon",
                    resource: { primitive: "circle"    },
                    material: { color: [0, 0, 0, 0]   },
                    size: 20,
                    outline: {
                        color: "black",
                        size: 0.5
                    }
                }]
            }
        }
    })
    map=new Map({
        basemap:"satellite",
        ground:"world-elevation",
        layers: [要素图层]
    })
    view = new SceneView({
        map: map,
        container: "viewDiv",
        camera:{
            position:{
                type:"point",
                longitude:120.4,
                latitude:33.8,
                z:150000
            },
            heading:0,
            tilt:60
        }
    })
    view.ui.remove(["zoom","attribution","compass","navigation-toggle"])
})//onMounted()结尾
</script>

<style scoped>
    #viewDiv,#container{
    height:100%;width:100%;padding:0;margin:0;
    }
    span{
        white-space: pre-line;
        color:rgb(100,100,100)
    }
</style>
  